<template >
  <div class="sourceEdit">
    <div class="sourceEditContent">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio v-model="ruleForm.type" label="text">文本</el-radio>
          <el-radio v-model="ruleForm.type" label="news">图文</el-radio>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 'text'" label="文本" prop="contentTemp">
          <el-input v-model="ruleForm.contentTemp"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 'news'" label="图文标题" prop="newsTitle">
          <el-input v-model="ruleForm.newsTitle"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 'news'" label="图文描述" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 'news'" label="图片链接" prop="pictureName">
          <div class="imagelinkContent">
            <div :style="{backgroundImage:`url(${ruleForm.picUrlTemp})`}" class="imageMaterialContent" @click="handleSelectImage">
            </div>
            <div v-if="showImageInfo" class="iamgeInfo">
              <div>图片名称：{{ ruleForm.pictureName }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == 'news'" label="图文链接" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="ruleForm.status" label="normal">正常</el-radio>
          <el-radio v-model="ruleForm.status" label="disable">隐藏</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button v-if="this.$route.query.id == null" type="primary" @click="submitForm('ruleForm')">新增</el-button>
          <el-button v-else type="primary" @click="submitForm('ruleForm')">编辑</el-button>
          <el-button v-if="this.$route.query.id == null" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片弹框 -->
    <el-dialog :visible.sync="dialogTableVisible" title="封面图片" width="60%">
      <el-table :data="imageMaterial">
        <el-table-column property="name" label="图片名称" width="150">
        </el-table-column>
        <el-table-column property="url" label="地址" width="500" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="操作"
          width="170"
          align="center"
          fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleMaterialImage(scope.row)">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="bottom-pagination">
        <el-pagination
          :current-page.sync="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="getImageMaterial()">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import materialImage from '@/assets/img/material.jpg'
export default {
  components: {
  },
  data() {
    return {
      ruleForm: {
        title: '',
        type: 'text',
        content: '',
        contentTemp: '',
        newsTitle: '',
        description: '',
        picUrl: '',
        picUrlTemp: materialImage,
        url: '',
        remark: '',
        status: 'normal',
        pictureName: ''
      },
      pictureLink: '',
      imageMaterial: [],
      showImageInfo: false,
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        contentTemp: [
          { required: true, message: '请输入文本', trigger: 'blur' }
        ],
        newsTitle: [
          { required: true, message: '请输入图文标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        pictureName: [
          { required: true, message: '请输入图片链接', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入图文链接', trigger: 'blur' }
        ]
      },
      dialogTableVisible: false,
      // 分页参数
      pageNum: 1,
      pageSize: 5,
      total: 500
    }
  },
  created() {
    if (this.$route.query.id !== null) {
      this.getSourceDetailById()
    }
  },
  methods: {
    // 根据id获取资源信息
    getSourceDetailById() {
      this.$http.get('/Response/get?id=' + this.$route.query.id).then(response => {
        if (response.data.code === 0) {
          this.ruleForm = response.data.data
          // 文本类型时候传入文本的格式转换显示
          if (response.data.data.type === 'text') {
            this.ruleForm.contentTemp = response.data.data.content.substring(30, response.data.data.content.length - 2)
          } else if (response.data.data.type === 'news') {
            const ruleFormObj = JSON.parse(response.data.data.content)
            this.ruleForm.newsTitle = ruleFormObj.title
            this.ruleForm.description = ruleFormObj.description
            this.ruleForm.url = ruleFormObj.url
            this.ruleForm.picUrl = ruleFormObj.picUrl
            this.ruleForm.pictureName = ruleFormObj.name
            this.showImageInfo = true
            this.ruleForm.picUrlTemp = materialImage
          }
        }
      }).catch(error => {
        this.$message({
          showClose: true,
          message: '获取资源详情异常{' + error + '}',
          type: 'error'
        })
      })
    },
    // 获取素材图片url
    getImageMaterial() {
      this.$http.post('/Material/batchGetMaterial', { type: 'image', offset: (this.pageNum - 1) * this.pageSize, count: this.pageSize }).then(response => {
        if (response.data.errcode === null) {
          if (response.data.item.length > 0) {
            this.imageMaterial = response.data.item
            this.total = parseInt(response.data.total_count)
          }
        }
      }).catch(errormsg => {
        this.$message({
          message: '获取素材图片url异常' + errormsg,
          type: 'error'
        })
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 编辑行为
          if (this.$route.query.id && this.ruleForm.id) {
            if (this.ruleForm.type === 'text') {
              this.ruleForm.content = '{"msgtype":"text",' + '"content": ' + '"' + this.ruleForm.contentTemp + '"' + '}'
            } else {
              this.ruleForm.content = '{"msgtype":"news",' + '"title":' + '"' + this.ruleForm.newsTitle + '",' + '"description":' + '"' + this.ruleForm.description + '",' + '"picUrl":' + '"' + this.ruleForm.picUrl + '",' + '"url":' + '"' + this.ruleForm.url + '",' + '"name":' + '"' + this.ruleForm.pictureName + '"}'
            }
            this.$http.post('/Response/update', this.ruleForm).then(response => {
              if (response.data.code === 0) {
                this.$message({
                  showClose: true,
                  message: '修改资源信息成功！',
                  type: 'success'
                })
              }
            }).catch(error => {
              this.$message({
                showClose: true,
                message: '修改资源信息异常{' + error + '}',
                type: 'error'
              })
            })
          } else {
            if (this.ruleForm.type === 'text') {
              // this.ruleForm.content = '{"content": ' + '"' + this.ruleForm.contentTemp + '"' + '}'
              this.ruleForm.content = '{"msgtype":"text",' + '"content":' + '"' + this.ruleForm.contentTemp + '"' + '}'
            } else {
              this.ruleForm.content = '{"msgtype":"news",' + '"title":' + '"' + this.ruleForm.newsTitle + '",' + '"description":' + '"' + this.ruleForm.description + '",' + '"picUrl":' + '"' + this.ruleForm.picUrl + '",' + '"url":' + '"' + this.ruleForm.url + '",' + '"name":' + '"' + this.ruleForm.pictureName + '"}'
            }
            this.$http.post('/Response/add', this.ruleForm).then(response => {
              if (response.data.code === 0) {
                this.$message({
                  showClose: true,
                  message: '新增资源信息成功！',
                  type: 'success'
                })
              }
            }).catch(error => {
              this.$message({
                showClose: true,
                message: '新增资源信息异常{' + error + '}',
                type: 'error'
              })
            })
          }
        } else {
          this.$message({
            showClose: true,
            message: '表单验证失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectImage() {
      this.getImageMaterial()
      this.dialogTableVisible = true
    },
    // 点击弹出框选择之后
    handleMaterialImage(scope) {
      this.ruleForm.pictureName = scope.name
      this.ruleForm.picUrl = scope.url
      this.showImageInfo = true
      this.dialogTableVisible = false
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getImageMaterial()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.sourceEdit {
   padding: 10px;
  .sourceEditContent {
    padding: 20px;
    background-color: white;
    .regionWrapper {
      display: flex;
      .nowSource {
        width: 240px;
        height: 120px;
        border: 2px dotted #d9dadc;
        text-align: center;
        margin-bottom: 20px;
        .homeIcon {
          width: 30px;
          height: 30px;
          margin-top: 20px;
        }
        p {
          color: $color-primary;
        }
      }
      .addSource {
        margin-left: 10px;
        width: 240px;
        height: 120px;
        border: 2px dotted #d9dadc;
        text-align: center;
        margin-bottom: 20px;
        .homeIcon {
          margin-top: 20px;
          width: 30px;
          height: 30px;
        }
        p {
          color: $color-primary;
        }
      }
    }
  }
}
.imagelinkContent {
  display: flex;
  .imageMaterialContent {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .iamgeInfo {
    color: red;
    padding-top: 55px;
    margin-left: 10px;
    font-size: 12px;
  }
}
.imageWrapper {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
